<html>
<head>
    <title>OpenStreetMap New England States</title>
	<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
    
    <script type="text/javascript">
        // Start position for the map (hardcoded here for simplicity)
        var lat=45.01;
        var lon=6.12;
        var zoom=0;
 
        var map; //complex object of type OpenLayers.Map
 
        //Initialise the 'map' object
        function init() {
 
            map = new OpenLayers.Map ("map", {
                 controls:[new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.Attribution(), 
                    new OpenLayers.Control.MousePosition()],
                maxExtent: new OpenLayers.Bounds(675631,5618094,687887,5628255),
                //maxResolution: 50062.578223,
                maxResolution: 23.9375,
                //numZoomLevels: 20,
                units: 'm',
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326")
            } );
 
 
            // Define the map layer
            // Other defined layers are OpenLayers.Layer.OSM.Mapnik, OpenLayers.Layer.OSM.Maplint and OpenLayers.Layer.OSM.CycleMap
            //var mslayer = new OpenLayers.Layer.MapServer( "MapServer Layer",
              //                                "http://192.168.0.26/cgi-bin/mapserv?map=/home/pi/Documents/osm-render/google-small.map&",
                //                              {layers: 'land0 borders0 places0 places1 places2 places3 places4 places5 places6 places7 places8 places9 places10 places11 places12 places13 places14 places15 places16 places17 places18 roads5 roads6 borders6 places6 land7 roads5 roads6 roads7 roads8 roads9 roads10 roads11 roads12 roads13 roads14 roads15 roads16 roads17 roads18 railways9 railways10 railways11 railways12 railways13 railways14 railways15 railways16 railways17 railways18 railways19 landuse4 landuse5 landuse6 landuse7 landuse8 landuse9 landuse10 landuse11 landuse12 landuse13 landuse14 landuse15 landuse16 landuse17 landuse18 waterways18 waterarea4 waterarea5 waterarea6 waterarea7 waterarea8 waterarea9 waterarea10 waterarea11 waterarea12 waterarea13 waterarea14 waterarea15 waterarea16 waterarea17 waterarea18'},
                  //                            {singleTile: "true", ratio:1} );
                     //var mslayer = new OpenLayers.Layer.WMS( "MapServer Layer",
                       //                       "http://192.168.0.26/cgi-bin/tilecache.cgi?",
                         //                     {layers: 'ski'},
                         //                     {singleTile: "true", ratio:1} );
                                              
                   var layer = new OpenLayers.Layer.WMS("Ski","http://192.168.0.26/cgi-bin/tilecache.cgi?", 
			{layers: 'ski',format: 'image/png; mode=24bit',alpha : 'true',transparent: 'true'},{isBaseLayer: true, projection: 'EPSG:900913',units: 'm', maxExtent: new OpenLayers.Bounds(675631,5618094,687887,5628255), maxResolution: 23.9375});
			layer.transitionEffect = 'resize';	
            map.addLayer(layer);
 
            if( ! map.getCenter() ){
                var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
                map.setCenter (lonLat, zoom);
            }
        }
 
    </script>

</head>

<body>
 
    <!-- define a DIV into which the map will appear. Make it take up the whole window -->
    <div style="width:100%; height:100%" id="map"></div>
    <script type="text/javascript" defer="true">
    	 init();
    </script>
 
</body>
 
</html>
